<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<!--  <link type="text/css" rel="stylesheet" href="../css/index.css">-->
  <link type="text/css" rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./resoures/element-ui/index.css">
  <!-- //引入vue.js -->
  <script src="./resoures/vue.js"></script>
  <script src="./resoures/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="./resoures/axios.min.js"></script>
</head>

<body>
  <div id="app">
    <div class="indexHead">

      <div class="catalogueLogo">
        <img src="./img/logo.png" height="70px">

      </div>
      <div class="title">
        网上书城
      </div>
      <div class="indexHeadText" >
        <a href="/index.html" class="indexHeadTextA" style="color: red">首页</a>
        <a href="/bookClassification" class="indexHeadTextA" >图书分类 </a>
        <a href="/page/register.html" class="indexHeadTextA" v-if="!login">免费注册</a>
        <a href="/page/login.html" class="indexHeadTextA" v-if="!login">请先登录</a>
        <a href="/shoping.html" class="indexHeadTextA" v-if="login">购物车</a>
        <a href="/order.html" class="indexHeadTextA" v-if="login">我的订单</a>
        <div style="width: 100px; ">
        </div>
<!--        已登录后展示的退出按钮-->
        <a href="/index" class="indexHeadTextA" v-if="login" style="color: red; " @click="quit">用户名:{{login_username}} ,点此退出登录</a>
      </div>
      <div style="position: absolute;top: 20px ;left: 300px">
        <el-button type="danger" v-if="isAdmin" @click="admin">后台</el-button>
      </div>
      <div style="position: absolute;top: 30px ;left: 1400px">
        <el-button type="primary" icon="el-icon-edit" @click="dialogVisible = true">资料</el-button>
      </div>

    </div>
    <div class="input">
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="图书名称：" >
          <el-input v-model="input" placeholder="图书名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
<!--    资料信息-->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
      <!-- 表单部分 -->
      <el-form ref="myForm" :model="formData" label-width="100px">
        <el-form-item label="修改密码" prop="password">
          <el-input v-model="formData.password" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <!-- 其他表单字段 -->
      </el-form>
      <!-- 底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </span>
    </el-dialog>


    <!-- 轮播图 -->
    <div id="Lunbotu">
      <template>
        <el-carousel indicator-position="outside" height="500px">
          <el-carousel-item v-for="item in imgList" :key="item">
            <img :src="item" class="LunbotuImage">
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
     <!-- 新鲜好书+低价专区 -->
    <div class="recommendation">
    <div class="recommendation1">
      <div class="recommendation1Title">
        <p style="color: black; font-size: 30px; display: inline;">新鲜好书</p>
        <p style="color: rgb(59, 58, 58); font-size: 15px; display: inline; margin-left: 20px;">书单推荐 品质靠谱</p>
      </div>
      <div class="recommendation1Content">
        <div class="recommendation1ContentchirldA" @click="gotodatail(contentList[0].id)">
          <div class="recommendation1Contentchirld" >
            <div class="recommendationimage">
              <img :src="contentList[0].imageName" alt="" width="80%" height="80%">
            </div>
            <div class="recommendationText">
              <div class="recommendationText1" >{{contentList[0].name}}</div>
              <div class="recommendationText2">
                {{contentList[0].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[0].publisher}}
              </div>
              <div class="recommendationText3">￥{{contentList[0].price}}</div>
            </div>
          </div>
        </div>
        <div href="/" class="recommendation1ContentchirldA" @click="gotodatail(contentList[1].id)" >
          <div class="recommendation1Contentchirld">
            <div class="recommendationimage">
              <img :src="contentList[1].imageName" alt="" width="80%" height="80%">
            </div>
            <div class="recommendationText">
              <div class="recommendationText1" >{{contentList[1].name}}</div>
              <div class="recommendationText2">
                {{contentList[1].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[1].publisher}}
              </div>
              <div class="recommendationText3">￥{{contentList[1].price}}</div>
            </div>
          </div>
        </div>
        <div href="/" class="recommendation1ContentchirldA" @click="gotodatail(contentList[2].id)" >
          <div class="recommendation1Contentchirld">
            <div class="recommendationimage">
              <img :src="contentList[2].imageName" alt="" width="80%" height="80%">
            </div>
            <div class="recommendationText">
              <div class="recommendationText1" >{{contentList[2].name}}</div>
              <div class="recommendationText2">
                {{contentList[2].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[2].publisher}}
              </div>
              <div class="recommendationText3">￥{{contentList[2].price}}</div>
            </div>
          </div>
        </div>
        <div href="/" class="recommendation1ContentchirldA" @click="gotodatail(contentList[3].id)">
          <div class="recommendation1Contentchirld">
            <div class="recommendationimage">
              <img :src="contentList[3].imageName" alt="" width="80%" height="80%">
            </div>
            <div class="recommendationText">
              <div class="recommendationText1" >{{contentList[3].name}}</div>
              <div class="recommendationText2">
                {{contentList[3].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[3].publisher}}
              </div>
              <div class="recommendationText3">￥{{contentList[3].price}}</div>
            </div>
          </div>
        </div>
        <div href="/" class="recommendation1ContentchirldA" @click="gotodatail(contentList[4].id)" >
          <div class="recommendation1Contentchirld">
            <div class="recommendationimage">
              <img :src="contentList[4].imageName" alt="" width="80%" height="80%">
            </div>
            <div class="recommendationText">
              <div class="recommendationText1" >{{contentList[4].name}}</div>
              <div class="recommendationText2">
                {{contentList[4].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[4].publisher}}
              </div>
              <div class="recommendationText3">￥{{contentList[4].price}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="recommendation1" style="margin-top: 50px">
        <div class="recommendation1Title">
          <p style="color: black; font-size: 30px; display: inline;">新鲜好书</p>
          <p style="color: rgb(59, 58, 58); font-size: 15px; display: inline; margin-left: 20px;">书单推荐 品质靠谱</p>
        </div>
        <div class="recommendation1Content">
          <div href="/" class="recommendation1ContentchirldA" @click="gotodatail(contentList[9].id)">
            <div class="recommendation1Contentchirld">
              <div class="recommendationimage">

                <img :src="contentList[9].imageName" alt="" width="80%" height="80%">

              </div>
              <div class="recommendationText">
                <div class="recommendationText1" >{{contentList[9].name}}</div>
                <div class="recommendationText2">
                  {{contentList[9].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[9].publisher}}
                </div>
                <div class="recommendationText3">￥{{contentList[9].price}}</div>
              </div>
            </div>
          </div>
          <div href="/" class="recommendation1ContentchirldA" @click="gotodatail(contentList[5].id)">
            <div class="recommendation1Contentchirld">
              <div class="recommendationimage">

                <img :src="contentList[5].imageName" alt="" width="80%" height="80%">

              </div>
              <div class="recommendationText">
                <div class="recommendationText1" >{{contentList[5].name}}</div>
                <div class="recommendationText2">
                  {{contentList[5].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[5].publisher}}
                </div>
                <div class="recommendationText3">￥{{contentList[5].price}}</div>
              </div>
            </div>
          </div>
          <div href="/" class="recommendation1ContentchirldA" @click="gotodatail(contentList[6].id)">
            <div class="recommendation1Contentchirld">
              <div class="recommendationimage">
                <img :src="contentList[6].imageName" alt="" width="80%" height="80%">
              </div>
              <div class="recommendationText">
                <div class="recommendationText1" >{{contentList[6].name}}</div>
                <div class="recommendationText2">
                  {{contentList[6].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[6].publisher}}
                </div>
                <div class="recommendationText3">￥{{contentList[6].price}}</div>
              </div>
            </div>
          </div>
          <div href="/" class="recommendation1ContentchirldA" @click="gotodatail(contentList[7].id)" >
            <div class="recommendation1Contentchirld">
              <div class="recommendationimage">

                <img :src="contentList[7].imageName" alt="" width="80%" height="80%">

              </div>
              <div class="recommendationText">
                <div class="recommendationText1" >{{contentList[7].name}}</div>
                <div class="recommendationText2">
                  {{contentList[7].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[7].publisher}}
                </div>
                <div class="recommendationText3">￥{{contentList[7].price}}</div>
              </div>
            </div>
          </div>
          <div href="/" class="recommendation1ContentchirldA" @click="gotodatail(contentList[8].id)">
            <div class="recommendation1Contentchirld">
              <div class="recommendationimage">
                <img :src="contentList[8].imageName" alt="" width="80%" height="80%">
              </div>
              <div class="recommendationText">
                <div class="recommendationText1" >{{contentList[8].name}}</div>
                <div class="recommendationText2">
                  {{contentList[8].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[8].publisher}}
                </div>
                <div class="recommendationText3">￥{{contentList[8].price}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data() {
      return {
        imgList: ["../img/desktop_1.jpg", "../img/desktop_2.jpg", "../img/desktop_3.jpg", "../img/desktop_4.jpg"],
        contentList: [
        ],
        msg: 100,
        login:false,
        login_username:'',
        input:'',
        dialogVisible: false,
        formData:{},
        isAdmin:false
      }
    },
    mounted() {
      let _this = this;
      axios.post("http://localhost:8081/indexpage").then(function (resp) {
        _this.contentList = resp.data
        console.log(resp.data)
      });
      //判断登陆状态 首先获取名为"Linusername"的会话存储数据
      if (this.checkLogin()){
        this.login = true
        this.login_username = sessionStorage.getItem("Linusername")
      }
      if (this.checkAdmin()){
        this.isAdmin = true;
        console.log(this.isAdmin)
      }
      console.log(this.input)
    },
    methods:{
      quit(event){
        event.preventDefault();
        // 执行自定义逻辑
        alert("退出成功！")
        sessionStorage.removeItem("Linusername");
        location.href ="/index";
      },
      updateUser(){

      },
      admin(){
        location.href ="/Admin.html";
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
      },
      //关闭对话框
      handleCancel() {
        // 关闭对话框
        this.dialogVisible = false;
      },
      open1() {
        this.$message({
          message: '恭喜你，修改成功',
          type: 'success'
        });
      },
      open4() {
        this.$message.error('错了哦，这是一条错误消息');
      },
      //提交表单
      handleSubmit() {
        // 获取表单数据
        const formData = this.$refs.myForm.model;
        // 构造要发送的数据对象
        const requestData = {
          username:this.login_username,
          password: formData.password,
          phone: formData.phone,
          email: formData.email,
          address: formData.address
          // 可以添加其他字段
        };
        let _this = this;
        console.log("发送的数据为");
        console.log(requestData)
        // 发送 POST 请求
        axios.get('/updateuser', { params: requestData })
                .then(response => {
                  // 请求成功处理
                  console.log(response.data); // 输出响应数据
                  // 在这里可以根据接口返回的数据执行其他操作
                  if (response.data.code===1){
                    _this.open1();
                  }
                })
                .catch(error => {
                  // 请求失败处理
                  console.error(error); // 输出错误信息
                  // 在这里可以处理请求失败的情况，例如显示错误提示
                  _this.open4();
                });
        // 关闭对话框
        this.dialogVisible = false;
      },
      //获取存储的标识
      checkLogin(){
        let token = sessionStorage.getItem("Linusername");
        return token !== null && token !== undefined;
      },
      checkAdmin(){
        let isAdmin = sessionStorage.getItem("isAdmin");
        console.log(isAdmin)
        if (isAdmin == 1){
          return true
        }else {
          return false
        }
      },
      //点击查询跳转
      onSubmit(){
        if (this.input.trim() !== '') {
          // 如果输入不为空，则跳转到目标页面并携带参数
          location.href = `/searchbook.html?input=${encodeURIComponent(this.input)}`;
        } else {
          // 如果输入为空，您可以执行其他逻辑，例如显示提示消息或者禁止跳转
          console.log("请输入有效的图书名称");
        }
      },
      //查看图书详细的页面
      gotodatail(id) {
        if (typeof id === 'string' && id.trim() !== '') {
          // 构建跳转链接，并携带图书名称参数
          location.href = `/bookDetail.html?id=${encodeURIComponent(id)}`;
        } else {
          // 如果图书名称为空，执行其他逻辑，例如显示提示消息或者禁止跳转
          console.log("图书名称为空，无法跳转");
        }
      },

    }

  })
</script>

</html>